<!--
 * @Author: your name
 * @Date: 2021-08-24 18:57:02
 * @LastEditTime: 2021-08-25 19:37:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_study\src\views\profile\Address.vue
-->
<template>
  <div class="address-box">
    <nav-bar class="nav-bar">
      <template v-slot:center> 地址管理 </template>
    </nav-bar>

    <div class="vshow" v-show="list.length == 0" style="...">
      还没有地址，快去添加吧！
    </div>

    <div class="address-item">
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      />
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import { ref, reactive, onMounted, toRefs } from "vue";
import { useRouter } from "vue-router";
import { getAddressList } from "network/address";
import { Toast } from "vant";
import { useStore } from "vuex";

export default {
  components: { NavBar },
  name: "Address",
  setup() {
    const router = useRouter();
    const store = useStore();

    const state = reactive({
      chosenAddressId: "1",
      list: [],
    });

    const init = () => {
      Toast.loading("加载中。。。");
      getAddressList().then((res) => {
        if (res.data.length == 0) {
          state.list = [];
          return;
        } else {
          state.list = res.data.map((item) => {
            return {
              id: item.id,
              name: item.name,
              tel: item.phone,
              address: `${item.province} ${item.city} ${item.county} ${item.address}`,
              isDefault: !!item.is_default,
            };
          });
        }
      });
    };

    onMounted(() => {
      init();
    });

    const onAdd = () => {
      router.push({
        path: "/addressedit",
        query: { type: "add" },
      });
    };

    const onEdit = (item) => {
    //   console.log(item);
      router.push({
        path: "/addressedit",
        query: { type: "edit", addressId: item.id },
      });
    };

    return {
      ...toRefs(state),
      onAdd,
      onEdit,
    };
  },
};
</script>

<style lang='scss'>
.address-box {
  height: 300px;
  .vshow {
    margin-top: 100px;
    font-size: 24px;
    line-height: 44px;
  }
  .van-radio_icon {
    display: none;
  }
  .address-item {
    margin-top: 45px;
    .van-button {
      background: var(--color-tint);
      border-color: var(--color-tint);
      bottom: 100px;
    }
  }
}
</style>